<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车 </title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/interface.js"></script>
    <style>
          *{
            padding:0;
            margin:0;
        }
        .w{
            width:1200px;
            margin:20px auto;
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .cart{
            text-align: center;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:inherit;
        }
        .w{
            width:1280px;
           
        }
        a{
            color:inherit;
            text-decoration: none;
        }
        .tone{
            width:1200px;
            line-height: 45px;
            text-align:center;
            border-collapse: collapse;
            table-layout: fixed;
            margin:20px auto;
        }
        .tone  td{
            border:1px solid #000;
        }

        .cinfo{
            display: flex;
            padding:10px;
            height:120px;
            align-items: center;
        }
        .cimg{
            width:90px;
            height:90px;
        }
        .ctext{
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
        }
    </style>
</head>
<body>
    <div class="cart">
        <div class="islogin">
            <a href="./login_account.html">请登录</a>
            <a href="./register.html">免费注册</a>
        </div>
        <h2>我的购物车</h2>
        <p><a href="./goodlist.html">查看商品 </a></p>
        <table id="cartTable w" class="tone">
            <thead>
                <tr>
                    <td style="width:60px;"> 序号</td>
                    <td  class="" style="width:60px;">选择</td>
                    <td class="" >商品</td>
                    <td style="width:100px;">单价</td>
                    <td style="width:180px;">数量</td>
                    <td style="width:100px;">小计</td>
                    <td style="width:90px;">操作</td>
                </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
        <div class="foot" id="foot">
            <p>
                <label for="quan">
                    全选反选
                    <input type="checkbox" id="quan">
                </label>
            </p>
           
            <div>
                合计: <span> 0 </span> 元 
            </div>
            <div>
                已选商品: <span> 0 </span>  件 
            </div>
            <div>
                <button class="f1"> 删除选择</button>
                <button href="">去结算 0</button>
            </div>
        </div>
    </div>

    
    <script>
    
        // 作业 
        // 购物车的增删改查 + PHP  + MYSQL 
        // 下个 week 去千锋讲 
        
        // 获取 cookie
        var user = getCookie("loginAccount");
        var islogin =  document.getElementsByClassName('islogin')[0];
        
        var table = document.querySelectorAll("#cartTable")[0]
        var tbody = document.querySelectorAll(".tbody")[0]

        console.log(user)
        // 退出登录
        function exit(){
            setCookie('loginAccount','',-1);
            location.reload();
        }
        // 判断用户是否登录 通过 cookie\判断
        // 不管是否登录 详情都可以看到  但是购买商品  那就需要登录 
        if(user){
            islogin.innerHTML = `欢迎你,${user} <button onclick="exit()">退出</button>`;
            loadAllCartList(user);
        }

      


        async function loadAllCartList(user){
            let res = await getCartList({user});
            console.log(res);
            let {result} = res ; 

            if(result.length>0 ){
                var html = "";
                result.forEach((item,index)=>{
                    html += `<tr id="item${index}">
                    <td> ${index+1} </td>
                    <td> 
                        <input type="checkbox" class="check-one check"/>
                    </td>
                    <td class="cinfo"> 
                        <img src='${item.goodsImg}' class="cimg"/>
                        <p class="ctext"> ${item.goodsName} </p>
                    </td>
                    <td> ${item.goodsPrice} </td>
                    <td> <button>减1</button> <input style="width:50px" type="number" value='${item.buynum}' />  <button>加1</button> </td>
                    <td> ${item.total} </td>
                    <td> 
                        <button onclick="deleteById(${item.id},event)">删除</button>    
                    </td>
                    </tr>`
                })

                tbody.innerHTML = html;
              
            }else{
                tbody.innerHTML = `<td colspan='7'>暂无数据,  <a href="./goodlist.html">前往购买</a> </td>`
            }
        }

        async function deleteById(id,e){
            console.log(id);
            if(window.confirm("你真舍得删除这个商品?")){
                let res = await deleteCartOne({id:id});   // 后端删除 
                console.log(res);
                var {status,detail}  = res;
                if(status){
                    // 删除前端 
                    // var e = e || window.event;
                    // var target = e.target || e.srcElement;   // 当前的目标元素  

                    // var oTr =  target.parentElement.parentElement;
                    // oTr.remove();

                    loadAllCartList(user);
                }
                alert(detail);
            }
            
        }

    </script>
</body>
</html>